.country-show {
  margin-top: 44px;
  font-weight: 400;
  color: $dark;

  .icon {
    width: 18px;
    height: 18px;
    fill: #bfbcc3;


    .icon-share {
      position: absolute;
      top: 50%;
      left: 50%;
      @include transform-translate(-50%, -50%);
      width: 12px;
      height: 12px;
    }
  } // global svg size

  .circle {
    svg{
      fill: #bebcc2;
      width: 100%;
      height: 65%;
      position: absolute;
      top: 50%;
      left: 50%;
      @include transform(translate(-50%,-50%));
    }
    position: relative;
    border-radius: 50%;
    border: 1px solid #bebcc2;

    &.green {
      svg{
        fill: $white;
      }
      background: $cGreen;
      border: 1px solid $cGreen;
    }

    &.sidenav-icon {
      display: inline-block;
      position: absolute;
      top: 50%;
      right: 0px;
      transform: translate(0, -50%);
      -webkit-transform: translate(0, -50%);
      width: 18px;
      height: 18px;
      background: $cGreen;
      border-color: $cGreen;
      svg {
        position: absolute;
        display: inline-block;
        height: 12px;
        width: 12px;
        fill: $white;
      }
    }
  }

  .share {
    .embed & {
      display: none;
    }
  }
  .embed-country-title{
    margin-top: 50px;
    text-align: center;
    font-size: 2em;
  }
  .share_control {
    position: relative;
    width: auto;
    height: 39px;
    left: auto;
    right: auto;
    top: auto;
    display: inline-block;
    padding: 10px 12px 0 12px;
    text-transform: uppercase;
    border-radius: 20px;

    .country-icons-share {
      height: 16px;
      width: 16px;
      display: inline-block;
      vertical-align: bottom;
      margin-left: 5px;
    }

    &:hover {
      border-color: lighten( #73707F, 6% );
    }
  }
  .country-share .share_control {
      width: 95px;
      left: 818px;
      display: block;
      background: none;
      top: -45px;
      background-color: transparent;
    }
  .country-header {
    width: 100%;
    background: #333;
    position: relative;

    .show_graph_source {
      position: absolute;
      top: 42px;
      left: 0;
      z-index: 310;
      width: 100%;
      text-align: right;
      color: $white;
      font-size: 10px;
      padding: 4px;

      @media (min-width: $br-mobile) {
        width: auto;
        text-align: left;
        font-size: 11px;
        bottom: 94px;
        margin: 0 25px;
        top: auto;
      }

      @media (min-width: 1050px) {
        bottom: 0;
        margin: 0;
      }

    }


    .country-header-inner {
      background: #333;
    }

    .country-title {
      padding: 20px;
      .embed & {
        padding: 0;
      }

      h1 {
        color: white;
        font-size: 47px;
        display: inline-block;
        font-weight: 300;
        width: 100%;
        margin-top: 0.1em;
        margin-bottom: 0.2em;

        max-width: 515px;
        display: block;

        .embed & {
          max-width: 100%;
          font-size: 32px;
          padding: 10px;
        }
      }

      .country-selector {
        display: inline-block;
        vertical-align: top;
        margin-top: 2px;
        border: 1px solid #6B6B6B;
        border-radius: 39px;
        height: 39px;
        width: 310px;
        position: relative;
        right: -4px;
        .embed & {
          display: none;
        }
        .white{
          color: $white;
        }
        .dark{
          color: $dark;
        }
      }

      select {
        border: none;
        font-size: 13px;
        text-transform: uppercase;
        background: transparent;
        color: #FFF;
        -webkit-appearance: none;
        padding: 10px 15px;
        width: 100%;
        -moz-appearance: none;
        text-indent: 0.01px;
        text-overflow: '';
        &::-ms-expand {
          display: none;
        }

        &:focus {
          outline: 0;
        }
      }

      .selector-arrow {
        border-color: #73707D transparent;
        border-style: solid;
        border-width: 6px 5px 0 5px;
        width: 0;
        height: 0;
        top: 50%;
        right: 20px;
        margin-top: -3px;
        position: absolute;
        pointer-events: none;
      }

      .selector-remove {
        padding: 5px;
        color: #73707D;
        font-size: 13px;
        top: 9px;
        right: 35px;
        position: absolute;
        cursor: pointer;
        display: none;
        &:hover {
          color: lighten(#73707D, 10);
        }
      }

      .country-indepth__bubble {
        display: inline-block;
        margin: 4px 0 0 15px;

        a {
          max-width: 190px;
          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis;
          display: block;
        }
      }
    } // country-title

    .country-details {
      height: 320px;
      .embed & {
        height: 230px;
      }

      .country-preview {
        width: calc(100% - 215px);
        height: 100%;
        float: left;
        position: relative;
        @include box-sizing(border-box);
        .embed & {
          width: 100%;
          display: flex;
          float: left;
          height: initial;
        }


        h4 {
          text-transform: uppercase;
          font-size: 16px;
          line-height: 18px;
          color: #FEFEFE;
          opacity: .5;
        }

        hr {
          margin: 15px auto;
          border: none;
          border-top: 1px solid rgba(255, 255, 255, 0.4);
          width: 95%;
          float: left;
        }

        .map,
        .tree-numbers,
        .loss-gain-graph {
          float: left;
          height: 100%;
          @include box-sizing(border-box);
        }

        .tree-numbers,
        .loss-gain-graph {
          padding: 10px 1px;
          .embed & {
            padding: 10px 0;
            top: 0;
          }
        }

        .map {
          width: 40%;
          height: 100%;
          background: transparent;
          cursor: default;
          .embed & {
            width: 33.33333%;
            height: 260px;
          }

          &.loaded {
            background: #333;
          }
        }

        .mobile-scroll{
          display: none;
        }

        .tree-numbers {
          width: 30%;
          // padding-left: 20px;
          .embed & {
            width: 28.33333%;
          }
          div,
          h4 {
            @media (min-width: $br-mobile) {
              max-width: 230px;
            }
          }

          h4 {
            text-align: center;
            @media (min-width: $br-mobile) {
              text-align: left;
            }
            &.t {
              box-sizing: border-box;
              border-top: 1px solid rgba(255, 255, 255, 0.7);
              padding-top: 16px;
            }
          }

          .amount,
          .unit {
            margin-top: 6px;
            color: $cGreen;
            display: inline-block;
          }

          .amount {
            font-size: 47px;
            font-weight: 500;
          }

          .total-area {
            box-sizing: border-box;
            padding: 17px 0 17px;
            @media (min-width: $br-mobile) {
              border-top: 1px solid rgba(255, 255, 255, 0.3);
            }
          }

          .total-loss {
            font-size: 24px;
            font-weight: 500;
            margin-top: 6px;
            color: #97bd3d;
            display: inline-block;
            .total-loss-ha {
              display: inline-block;
              color: #FEFEFE;
              opacity: .5;
              margin-top: 2px;
              font-size: 11px;
              display: inline;
            }
          }

          .total-area,
          .total-loss {
            .amount {
              font-size: 24px;
            }
          }

        }
        .canopy-status {
          width: 80%;
          text-align: center;
          font-size: 13px;
          background: #555;
          color: rgba(255, 255, 255, 0.5);
          padding: 8px;
          margin: 0 auto 15px;
          max-width: 100%;

          @media (min-width: $br-mobile) {
            position: absolute;
            left: 40%;
            bottom: 35px;
            width: calc(60% - 20px);
            margin: 15px auto 0;
          }
          @media (min-width: 1050px) {
            bottom: 40px;
          }

          em {
            color: #97bd3d;
            border-bottom: 1px #97bd3d dashed;
            cursor: pointer;
          }
        }
        .note-status {
          width: 80%;
          text-align: center;
          font-size: 13px;
          color: rgba(255, 255, 255, 0.5);
          padding: 8px 20px 8px 8px;
          margin: 0 auto 15px;
          max-width: 100%;

          @media (min-width: $br-mobile) {
            text-align: right;
            position: absolute;
            right: 0;
            bottom: 3px;
            margin: 15px auto 0;
          }
          @media (min-width: 1050px) {
            bottom: 5px;
          }

          em {
            color: red;
          }
        }


        .loss-gain-graph {
          width: 235px;
          position: relative;
          top: -113px;
          padding-top: 50px;
          right: 0px;
          @media (min-width: $br-mobile) {
            right: -10px;
          }
          .embed & {
            width: 33.33333%;
          }

          #lossGainGraph {
            position: relative;
            left: 20px;
            height: 150px;
            padding-top: 15px;
          }

          .coming-soon {
            display: none;
            position: absolute;
            z-index: 10;
            top: 70px;
            left: 10px;
            padding: 30px 0;
            margin-right: 10px;
            font-size: 17px;
            text-transform: uppercase;
            text-align: center;
            color: #999;
            background: $dark;

            span {
              width: 90%;
              display: inline-block;
            }
          }

          &.ghost {
            @include opacity(.5);
            cursor: default;
          }

          h4 {
            margin-bottom: 20px;
          }

          .graph-amount,
          .graph-gain-amount,
          .total-loss,
          .graph-gain-total,
          .total-loss-ha,
          .graph-date {
            text-align: center;
            display: block;
            width: 225px;
            span {
              display: inline;
            }
          }

          .graph-amount,
          .graph-gain-amount,
          .total-loss {
            font-size: 30px;
            font-weight: 500;
            color: $cGreen;
          }
          .graph-amount {
            font-size: 23px;
          }
          .graph-gain-amount {
            text-align: center;
            position: relative;
            top: -12px;
            @media (min-width: $br-mobile) {
              text-align: left;
            }
          }

          .graph-date,
          .graph-gain-total,
          .total-loss-ha {
            color: #FEFEFE;
            opacity: .5;
            margin-top: 2px;
            font-size: 11px;
            display: inline;
          }

          .gain-tooltip {
            position: absolute;
            padding: 10px;
            width: 150px;
            background: white;
            text-align: center;
            border-radius: 5px;
            font-size: 22px;
            color: $cGreen;

            span {
              font-size: 13px;
              color: #524F5C;
              margin-top: 2px;
              display: block;
            }

            &:before {
              content:'';
              display:block;
              width:0;
              height:0;
              position:absolute;

              border-left: 8px solid transparent;
              border-right: 8px solid transparent;
              border-top: 8px solid white;

              right: 0;
              left: 0;
              margin: auto;
              bottom: -8px;
            }
          }
        } // loss-gain-graph
      } // country-preview

      .country-sidenav {
        width: 215px;
        height: 100%;
        background: transparent;
        @media (min-width: 1051px){
          position: absolute;
          right: 0;
          top: 0;
        }
        button{
          display: none;
          height: 87px;
          width: 100%;
          position: relative;
          text-transform: uppercase;
          font-family: inherit;
          font-size: 14px;
          color: #BEBCC2;
          background: none;
          box-shadow: none;
          border: none;
          outline: none;
          border-top: 1px solid #555;
          background: $dark;
          text-align: left;
          padding: 0 0 0 25px;
          .icon{
            display: inline-block;
            position: absolute;
            top: 50%;
            right: 20px;
            @include transform(translate(0,-50%));
            width: 18px;
            height: 18px;
            svg{
              stroke: #bebcc2;
            }
          }
          &.active{
            .icon{
              @include transform(translate(0,-50%) rotate(180deg));
            }
          }
          @media (max-width: $br-mobile - 1){
            display: block;
          }

        }
        > ul {
          position: relative;
          top: 0;
          width: 100%;
          height: 100%;
          padding: 1px 0;
          box-sizing: border-box;
          @include display-flex();
          @include flex-direction(column);
          @include justify-content(space-between);

          > li {
            width: 100%;
            position: relative;
            border: 1px solid $dark;
            height: 100%;
            border-bottom: none;
            @include display-flex();
            @include align-items(center);

            a {
              color: #BEBCC2;
              display: block;
              height: 87px;
              width: 95%;
              @include box-sizing(border-box);
              font-weight: 400;
              text-transform: uppercase;
              font-size: 14px;
              cursor: pointer;
              text-decoration: none;
              @include display-flex();
              @include align-items(center);
              padding: 0 30px 0 25px;

              .sidenav-icon {
                display: inline-block;
                position: absolute;
                top: 50%;
                right: 20px;
                @include transform-translate(0,-50%);
                width: 18px;
                height: 18px;
                svg{
                  fill: #bebcc2;
                }
              }


              .no_def {
                svg{
                  fill: #97bd3d;
                }
              }
              &:hover {
                .circle {
                  border: 1px solid #97bd3d;
                }
                .sidenav-icon {
                  svg{
                    fill: #97bd3d;
                  }
                }
              }
            }
            &:hover {
              background: #464646;
            }
            &.disabled{
              a{
                cursor: default;
                opacity: 0.25;
              }
              &:hover {
                background: #333;
                a{
                  .sidenav-icon {
                    svg{
                      fill: #bebcc2;
                    }
                  }
                }
              }
            }
          }
        }

        .umdoptions_dialog {

        }
      } // country-sidenav
    } // country-details
  } // country-header

  .country-indepth {
    clear: both;
    border: 1px solid #CCCCCC;
    border-bottom: 0;
    height: 185px;
    width: 100%;
    padding: 35px 20px;
    font-weight: 500;
    @include box-sizing(border-box);
    background-image: image-url('backgrounds/country-indepth.png');
    background-repeat: no-repeat;
    background-position: 96% 50%;

    .country-indepth__title {
      font-size: 29px;
    }

    .country-indepth__body {
      text-transform: uppercase;
      font-size: 14px;
      font-weight: 500;
      margin-top: 20px;
    }

    .country-indepth__links {
      margin-top: 25px;
      color: #bbb;
      font-weight: 300;
      font-size: 13px;

      a {
        font-size: 14px;
        display: inline-block;
        vertical-align: top;
        color: $cGreen;
        font-weight: 500;
      }
    }
  } // country-indepth

  .country-nav-container {
    width: 100%;
    position: relative;
    height: 49px;

    .country-nav {
      width: 100%;
      border-bottom: 1px solid #E5E5E5;
      height: 50px;
      position: absolute;
      top: 0;
      left: 0;
      z-index: 100;
    }

    .country-nav.fixed {
      background: #F2F2F3;
      .country-nav-items li a {
        border-top: none;
        text-decoration: none;
      }
    }

    .country-nav-items {
      width: 100%;
      text-align: center;

      > li {
        float: left;
        height: 50px;
        width: 16.66666%;
        border-left: none;
        @include display-flex();
        @include align-items(center);
        @include justify-content(center);
        background: #F2F2F3;
        &:first-child {
          border-left: 1px solid #E5E5E5;
        }
        &:last-child {
          border-right: 1px solid #E5E5E5;
        }

        @include box-sizing(border-box);

        &.active {
          background: white;
          border-bottom: 1px solid #fff;

          a {
            font-weight: 400;
            opacity: 1;
          }
        }
        a {
          display: inline-block;
          padding: 11px 15px;
          color: #000;
          font-size: 14px;
          text-transform: uppercase;
          cursor: pointer;
          font-weight: 400;
          opacity: .5;
          @include box-sizing(border-box);
          text-decoration: none;

          &.active {
            background: white;
            border-bottom: 1px solid white;
            color: #999999;
          }
        }

        &:hover {
          background: darken(#F2F2F3, 5%);
          a {
            color: #000;
            opacity: 1;
          }
        }
      }
    } // country-nav
  }

  .highlight {
    font-weight: 500;
    color: $cGreen;
  }
  .country-alerts,
  .country-production,
  .country-tenure,
  .country-employment,
  .country-forests-type {
    .coming-soon {
      width: 100%;
      font-size: 16px;
      text-transform: uppercase;
      text-align: center;
      padding: 10px 0;
      background: #f2f2f2;
      color: #666;
      font-style: italic;
    }
  }
  .country-tenure,
  .country-forests-type {
    .coming-soon {
      display: none;
    }
    .left-col, .right-col {
      width: auto;
    }

    .right-col {
      float: right;
    }
  }
  .country-forests-type {
    @media (min-width: $br-mobile) {
      .right-col {
        position: relative;
        left: -60px;
      }
    }
  }


  .country-section {
    border-bottom: 1px solid #E5E5E5;
    width: 100%;
    padding: 45px 0;

    .embed & {
      border: 0;
      padding: 12px 2px;
    }

    .section-info {
      @include clearfix();
      margin-bottom: 12px;
      padding-bottom: 10px;
      font-size: 14px;
      color: $dark;
      font-weight: 500;
      text-transform: uppercase;
      letter-spacing: -0.2px;
      .embed & {
        padding-bottom: 0px;
      }
      .section-btn {
        position: absolute;
        right: 0px;
        top: 0;
      }

      .share {
        position: relative;
        float: right;
        width: auto;
      }

      .info {
        margin: 0 2px 0 0;
      }
    }

    .section-share {
      position: relative;
      h6 {
        float: left;
        width: 75%;
        color: #000 ;
        opacity: .5;
        box-sizing: content-box;
        padding: 0 0 10px 0;
      }
      .info, .share {
        @include transform-translate(0, -4px);
      }
      .info {
        position: absolute;
        right: 20px;
        top: 4px;
      }
    }

    .no-cols {
      right: 20px !important;
    }

    .section-content {
      clear: both;
      @extend .clearfix;

      .left-col,
      .right-col {
        float: left;
        min-height: 1px;
        position: relative;

        &.wide {
          width: 100%;
        }
      }

      .left-col,
      .right-col {
        width: 45%;
      }

      .right-col {
        margin: 10% 0 0 0;
        @media (min-width: $br-mobile) {
          margin: 0 0 0 10%;
        }
        .embed &{
          margin: 0;
        }

        .section-btn {
          right: 20px;
        }
      }

      .section-title {
        padding: 0;
        font-size: 32px;
        line-height: 36px;
        font-weight: 300;
        margin: 0 0 10px;
        color: $dark;
      }
    }



    .country-alt {
      display: inline-block;
      width: 80%;
      clear: both;
      padding-top: 20px;
      color: #666;
      line-height: 1.4;
      font-size: 14px;
    }
  } // global sections

  .forma-graph path {
    stroke: $cGreen;
    stroke-width: 4px;
    fill: none;
  }
  .forma_dropdown-menu {
    display: none;
  }


  .forma-graph {
    position: relative;
    height: 160px;
    .embed &{
      display: block;
      width: 500px;
      margin: 0 auto;
    }
  }

  .forma-marker {
    stroke: white;
    stroke-width: 2px;
    fill: $cGreen;
  }

  .graph-tooltip {
    position: absolute;
    width: 150px;
    height: 78px;
    background: $cGreen;
    @include box-sizing(border-box);
    padding: 12px 10px;
    border-radius: 5px;
    text-align: center;
    z-index: 10;
    pointer-events: none;

    .graph-amount,
    .graph-gain-amount,
    .total-loss {
      font-size: 26px;
      color: white;
      margin-bottom: 4px;
      display: block;
    }

    .graph-date,
    .graph-gain-total,
    .total-loss-ha {
      font-size: 12px;
      color: #60644D;
      .date {
        margin-top: 2px;
        display: block;
        font-size: 14px;
      }
    }

    @include box-shadow(#ddd 2px 2px 10px);

    &:before {
      content:'';
      display:block;
      width:0;
      height:0;
      position:absolute;

      border-top: 8px solid transparent;
      border-bottom: 8px solid transparent;
      border-left: 8px solid $cGreen;

      right: -8px;
      margin: auto;
      top: 0;
      bottom: 0;
    }
  }

  .forma-alerts-legend {
    margin: 5px 0 25px 0;

    span {
      color: #666666;
      font-size: 13px;
      font-weight: 300;
      display: block;
    }

    .legend-title {
      color: $cGreen;
      font-size: 14px;
      font-weight: 500;
      margin-bottom: 3px;
    }
  }

  .country-alerts-section {
    #formaAlertsContent,
    #comingSoonContent {
      display: none;
    }

    #formaAlertsContent {
      h3 {
        text-transform: none;
      }
      .btn-rdn-primary {
        margin: 0;
      }
    }
    .btn {
      border-radius: 20px;
      border: none;
      padding: 10px 20px 8px;
      background: $cGreen;
      font-weight: 400;
      font-size: 13px;
    }
    .forma_dropdown-link {
      position: relative;
      padding-right: 55px;

      svg {
        position: absolute;
        top: 34%;
        right: 20px;
        width: 18px;
        height: 13px;
      }
    }
  } // country-alerts-section

  .forest-type-legends {
    font-size: 14px;
    display: none;
    margin-top: 10px;

    .legends-title {
      color: $cGreen;
      margin-bottom: 10px;
      display: block;
    }

    .legends-list {
      li {
        display: block;
        margin-bottom: 5px;
        color: #777;
        font-weight: 300;
        vertical-align: top;

        span {
          height: 14px;
          width: 14px;
          border-radius: 100px;
          display: inline-block;
          margin-right: 4px;
        }

        .regenerated {
          background: #A1BA42;
        }

        .primary {
          background: #819515;
        }

        .planted {
          background: #DDDDDD;
        }
      }
    }
  }

  .country-employment,
  .country-employment-section {
    .section-content .left-col,
    .section-content .right-col{
      .embed &{
        width: 100%;
      }
    }
    .section-content .left-col .section-title {
      @extend .clearfix;
      margin-bottom: 10px;
      font-size: 47px;
      display: inline-block;


      div,
      span {
        float: left;
        font-weight: 500;
      }

      span {
        box-sizing: border-box;
        width: 75%;
        padding: 0 0 0 10px;
        font-size: 12px;
        font-weight: 500;
        line-height: 1.2;

        text-transform: uppercase;
        color: #444;
      }
    }

    .man-list {
      color: #919191;
    }

  } // country-employment
  .country-tenure {
    .line-graph {
      font-weight: normal;
      text-transform: uppercase;

      circle {
        stroke-width: 2px;
        stroke: #f5f5f5;
      }

      text {

        font-size: 12px;
      }

      .units {
        font-weight: 500;
      }

      .one {
        fill: #75B22E;
      }

      .two {
        fill: #AAC700;
      }

      .three {
        fill: #AC0;
      }

      .four {
        fill: #FFD24D;
      }
    }
  }

  .country-policy-section {
    overflow: hidden;
    .country-section {
      border: 0;
      .section-content {
        padding: 10px 0 0;
      }
    }
    .country-legislation {
      .national-policy-links {
        margin: 5px 0 4px 0;
        font-size: 14px;
        text-decoration: underline;
      }
    }
    .country-external-links,
    .national-policy-links {
      font-size: 14px;

      .section-content {
        padding-left: 0;
        padding-bottom: 10px;
      }

      li {
        @include inline-block();
        position: relative;
        padding-right: 8px;
        margin: 0 5px 10px 0px;
        line-height: 14px;

        &:last-child{
          &:after{
            display: none;
          }
        }

        &:after{
          content: "";
          position: absolute;
          top: 0;
          right: 0;
          height: 100%;
          width: 1px;
          background: #ddd;

        }

        &:first-child {
          border: 0;
          margin-left: 0;
          padding-left: 0;
        }
      }

      a {
        color: $cGreen;
        text-decoration: none;
      }
    }
  }

  .country-carbon_stocks {
    display: table;
    padding: 0;

    .carbon-text,
    .emissions-text {
      float: left;
      padding: 50px 0;
      @include box-sizing(border-box);
      &.wide {
        width: 100%;
      }
    }

    .emissions-text {
      margin-left: -6%;
      padding: 50px 0 50px 50px;
      background: #333;
      box-shadow: 50px 0px 0 #333;
      text-align: left;

      .section-btn {
        right: 0;
      }

      .section-info {
        h6 {
          color: #FEFEFE;
          opacity: .5;
        }
      }

      .section-content{
        padding: 0;
        h3 {
          padding: 0;
          color: white;
          text-transform: none;
        }
      }
      &::after {
        content: '';
        width: 30%;
        height: 100%;
        background: #000;
      }
    }
  } // country-carbon-stocks-section

  .country-conventions-section {
    border: 0;
    ul {
      margin-left: -15px;
    }

    li {

      display: block;
      position: relative;
      float: left;
      padding: 0 0 0 15px;
      margin: 10px 0 0;
      width: 50%;
      @media (min-width: 480px){
        width: 33.33333%;
      }
      @media (min-width: 768px){
        width: 25%;
      }
      @media (min-width: 1000px){
        width: 12.5%;
      }
      @media (min-width: 1600px){
        width: 10%;
      }

      .convention-box{
        display: block;
        position: relative;
        width: 100%;
        height: 95px;
        border: 2px solid #CCCCCC;
        font-weight: 500;
        font-size: 12px;

        text-align: center;
        color: #AAAAAA;
        @include border-radius(2px);

      }
      .name-container {
        @include display-flex;
        height: calc(100% - 23px);
        @include align-items(center);
        .name {
          width: 100%;
        }
      }

      span {
        position: absolute;
        display: block;
        left: 0; right: 0; bottom: 0;
        padding: 5px;
        border-top: 1px solid #E2E2E2;
        font-weight: 500;
        font-style: italic;
        line-height: 12px;
        font-size: 11px;
        text-transform: uppercase;
      }
    }
  } // country-conventions-section

  .country-download-links-section {
    padding: 50px 0;
    text-align: center;
    clear: both;

    a {
      margin-top: 0;
      &:first-child {
        margin-right: 10px;
      }

      // &:hover {
      //   background: darken(#EEE, 5%);
      // }
    }
  } // country-download-links-section

  .country-blog-section {
    text-align: center;
    background: #97BD3D;

    .section-content {
      padding: 0;

      .section-title {
        margin: 25px;
        font-size: 36px;
        color: #FDFDFD;
        font-weight: 400;
      }
    }

    .columns {
      padding: 0;
      min-height: 340px;

      .column {
        float: left;
        display: inline;
        margin-top: 40px;
        min-height: 266px;

        &.first,
        &.last,
        &.round {
          width: 33%;
          margin: 0;
          margin-top: 10px;
          padding: 0;
        }

        &.round {
          a {
            margin: auto;
          }

          .circle-wrapper {
            position: relative;
            display: block;
            width: 85%;
            height: 0;
            padding-bottom: 85%;
            margin: 0 auto 50px;
            .title {
              position: absolute;
              top: 50%;
              left: 50%;
              @include transform-translate(-50%, -50%);
              color: #FDFDFD;
              width: 200px;
              strong, span {
                font-weight: 500;
              }
              strong {
                font-size: 19px;
                text-align: center;
              }
              span {
                display: block;
                margin: 20px 0 0;
                font-size: 14px;
                color: #97bd3d;
                text-transform: uppercase;
              }
            }
            a, .nostory {
              position: absolute;
              top: 0;
              left: 0;
              width: 100%;
              height: 100%;
              background: #333;
              border-radius: 50%;
              box-shadow: 0 0 0 7px rgba(255, 255, 255, 0.4);
              img {
                width: 100%;
                height: 100%;
                border-radius: 50%;
              } // circle image

              .veil {
                position: absolute;
                top: 0;
                width: 100%;
                height: 100%;
                background: rgba(51,51,51, .5);
                border-radius: 50%;
              } // veil
            }
          } // circle

          .title strong,
          .title span {
            font-weight: 500;
            font-weight: normal;
            font-size: 21;
          }

          .title span {
            font-size: 14px;
          }
        }

        &.first {
          text-align: left;
        }

        &.last {
          text-align: right;
        }

        .inline {
          display: inline;
          width: auto;
          height: auto;
        }

        .frame {
          width: 266px;
          background: #5E5E5E;
        }

        .see-more {
          display: block;
          margin: 25px 0;
          text-transform: uppercase;
          font-size: 14px;
          color: #FDFDFD;
          text-align: center;
          font-weight: 500;
          a {
            color: inherit;
            text-decoration: underline;
          }
        }

        .column-title {
          position: relative;
          display: inline-block;
          margin-bottom: 20px;
          font-size: 14px;
          text-transform: uppercase;
          color: #000;
          font-weight: 500;
          opacity: .6
        }

        .story-title {
          margin-bottom: 18px;
          padding: 0;
          font-size: 27px;
          color: #FDFDFD;
          a{
            color: #FDFDFD;
            &:hover{
              color: darken(#FDFDFD, 5%);
            }
          }
        }

        .story-content {
          margin-bottom: 30px;
          font-size: 14px;
          color: #000;
          line-height: 1.5;
          opacity: .7;

          a {
            color: inherit;
            text-decoration: underline;
          }
        }

        p {
          color: #FDFDFD;
          a {
            color: inherit;
            text-decoration: underline;
          }
        }
      } // column
    }
  } // country-blog-section

  .country-comments-section {
    background-color: #F5F5F5;
  } // country-comments-section
} // countries-sections

.countries {
  &.index .content {
    padding: 15px 0 56px;
  }

  &.show {
    .content {
      margin-bottom: 0;
    }

    .anchor-country-info {
      top: -45px;
      position: relative;
      float: left;
    }

    .section {
      @extend .clearfix;
      border-bottom: 1px solid #ddd;
      background-color: #F5F5F5;
      background-repeat: no-repeat;
      text-align: left;

      &.country_graphs,
      &.country_indepth,
      &.country_download_links,
      &.country_blog,
      &.country_comments {
        border-bottom: 0;
      }

      &.country_download_links,
      &.country_blog {
        text-align: center;
      }

      &.country_download_links {
        background: #E9EAE0;
      }

      &.section_dark {
        background: #222;
      }

      &.country_graphs {
        background: #fff;
        .inner{
          height: 340px;
        }
      }
    }
  }

  &.overview .content {
    margin-bottom: 40px;
  }

  .header {
    height: 211px;
  }
}

.btn-rdn {
  display: inline-block;
  margin-top: 10px;
  padding: 9px 25px;
  border: 1px solid #999;
  background: #EEE;
  font-size: 17px;
  line-height: normal;
  color: #545454;
  text-transform: uppercase;
  text-decoration: none;
  -webkit-border-radius: 25px;
  -moz-border-radius: 25px;
  -ms-border-radius: 25px;
  -o-border-radius: 25px;
  border-radius: 25px;

  &:hover {
    background: darken(#EEE, 5%);
  }

  &.btn-default {
  }

  &.btn-rdn-primary {
    background: #fff;
    border: 1px solid #97bd3d;
    color: #464353;
    text-transform: uppercase;
    &:hover {
      background: #f7f7f7;
    }
  }

  &.btn-rdn-dark {
    border-color: #555;
    background: #555;
    color: #fff;
    @include transition(background-color 0.2s ease);

    &:hover {
      @include transition(background-color 0.2s ease);
      background-color: #000;
      color: #fff;
    }
  }

  &.disabled {
    @include opacity(.4);
    pointer-events: none;
    cursor: default;
  }
} // Buttons

.umdoptions_dialog {
  display: none;
  position: relative;
  float: none;
  width: 100%;
  min-height: 250px;
  padding: 20px 20px 0px 20px;
  font-size: 16px;
  background: $white;
  z-index: 1000;

  @media (min-width: $br-mobile) {
    width: 442px;
    top: -395px;
    left: -444px;
    border: 1px solid #666;
    @include border-radius(3px);
    @include box-shadow(0px 0px 3px #666);
  }

  &::before {
    content: ' ';
    background-color: white;
    width: 15px;
    height: 15px;
    float: left;
    position: relative;
    top: -59px;
    left: 413px;
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
    z-index: 0;
  }

  &::before {
    top: 185px;
    left: 412px;
  }

  .close {
    display: block;
    position: absolute;
    top: 15px; right: 15px;
    width: 16px;
    height: 16px;
    svg{
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      fill: $dark;
    }
    &:hover{
      svg{
        fill: darken($dark,10%);
      }
    }
  }

  h2 {
    color: #a1ba42;
    border-bottom-color: #a1ba42;
    border-bottom: 2px solid #ccc;
    margin: 0 0 20px;
    padding: 0 0 20px;
    display: block;
    font-weight: 500;
    font-size: 13px;
    text-transform: uppercase;
  }
  p {
    color: #666;
    margin-bottom: 10px;
    clear: both;
    &.canopy {
      font-size: 11px;
      font-weight: 500;
      position: relative;
      width: 159px;
      .source {
        top: 1px;
        width: 10px;
        padding: 0;
        height: 10px;
        position: absolute;
        right: -240px;
        @include home-icons-sprite(information);
        background: image-url('home-icons/information.png');
      }
    }
    &.trees {
      height: 60px;
    }
    &.slider_container{
      position: relative;
    }
    span {
      height: 60px;
      float: left;
      width: 91px;
      &.forest_icon {
        float: right;
        background: image-url('backgrounds/map_options_tree-2.png') no-repeat;
      }
      &.tree_icon {
        margin-top: 20px;
        width: 25px;
        height: 41px;
        background: image-url('backgrounds/map_options_tree-1.png') no-repeat;
      }
    }
    .slider {
      background: image-url('/assets/icons/point.png') repeat-x 1px center;
      top: -13px;
      position: relative;
      width: 395px;
      #canopy_slider {
        width: 295px;
        margin-left: 45px;
        -webkit-appearance: none;
        background: image-url('/assets/icons/point.png') repeat-x -2px center;
        position: relative;
        top: 23px;
        cursor: pointer;
        @media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
          /* IE10+ specific styles go here */
          top: 4px;
          background: none;
        }
        &:focus {
          outline: 0;
        }
        &::-webkit-slider-thumb {
          -webkit-appearance: none;
          background-color: #666;
          width: 14px;
          height: 14px;
          @include home-icons-sprite(timeline_handler_white);
          cursor: col-resize;
          border-radius: 3px;
          z-index: 500;
          position:relative;
        }

        &::-moz-range-thumb {
          background: image-url('home-icons/timeline_handler_white.png');
          background-color: $cGreen;
          width: 14px;
          height: 14px;
          cursor: col-resize;
          border-radius: 3px;
        }
        &::-moz-range-track {
          display: none;
          background-color: transparent;
          z-index: 0;
          border: none;
        }

        &::-moz-focusring{
            outline: 1px solid white;
            outline-offset: -1px;
        }
        &::focus::-moz-range-track {
            outline: 0;
        }

        &::-ms-track {
            top: 4px;
            width: 300px;
            height: 16px;
            background: transparent;
            border: none;
            border-radius: 10px;

            /* remove default tick marks */
            color: transparent;
        }
        &::-ms-fill-lower {
            outline: none;
            background: transparent;
            border-radius: 10px 0 0 10px;
        }
        &::-ms-thumb {
          background: image-url('home-icons/timeline_handler_white.png');
          background-color: $cGreen;
          width: 14px;
          height: 14px;
          cursor: col-resize;
          border-radius: 3px;
        }
        &:focus::-ms-track {
            background: transparent;
        }
        &:focus::-ms-fill-lower {
            background: transparent;
        }
      }
    }
    .visible_range {
      display: block;
      position: absolute;
      top: 14px;
      background: #A2BC28;
      height: 6px;
      box-shadow: 1px 0 3px #cccccc;
      right: 0;
      width: 350px;
      border-top-right-radius: 3px;
      border-bottom-right-radius: 3px;
      pointer-events:none;
    }
    a {
      @include inline-block();
      width: 70px;
      padding: 10px 0;
      border: #666666;
      @include border-radius(3px);
      font-weight:bold;

      text-align: center;
      font-size:11px;
      text-transform:uppercase;
      text-decoration:none;

      &.apply {
        background:#A1BA42;
        color: #fff;
        border: 1px solid #839C26;

        &:hover {
          background: darken(#A1BA42, 10%);
          border-color:darken(#A1BA42, 10%);
        }
      }

      &.cancel {
        background: #fff;
        border: 1px solid #CCCCCC;
        color: #666666;

        &:hover { background:#f1f1f1; }

      }
    }
    &:last-child {
      float: right;
      margin-bottom: 0;
      display: none;
    }
  }
  ul {
    width: 390px;
    position: relative;
    height: 12px;
    li {
      list-style: none;
      display: inline;
      color: #A2BE00;
      font-size: 10px;
      position: absolute;
      cursor: pointer;
      z-index: 5;
      &.p0,
      &.p100 {
        color: #666;
        left: 0;
        cursor: default;
      }
      &.p10 {
        left: calc(12% - 5px);
      }
      &.p15 {
        left: calc(12*2% - 5px);
      }
      &.p20 {
        left: calc(12*3% - 5px);
      }
      &.p25 {
        left: calc(12*4% - 5px);
      }
      &.p30 {
        left: calc(12*5% - 5px);
      }
      &.p50 {
        left: calc(12*6% - 5px);
      }
      &.p75 {
        left: calc(12*7% - 5px);
      }
      &.p100 {
        left: calc(12*8% - 5px);
      }
    }
  }
}

.embed .country-show {
  font-weight: 400;
  color: $dark;
  margin: 0;
  padding: 10px;
  overflow: hidden;
  // display: flex;
  .embed-country-title{
    text-align: left;
    font-size: 2em;
    margin: 0;
  }
  .forma_dropdown-link{
    display: none;
  }
} // embed
.embed.countries_show .country-show {
  background: #333;
}

// --- MEDIA QUERIES --- //


// maxsize <= 1050
@media only screen and (min-width: $br-mobile) and (max-width: 1050px) {
  .country-show {

    .country-header {
      .country-details {
        height: auto;
      }

      .country-details .country-preview {
        padding: 20px;
        float: none;
        width: 100%;
        height: 330px;
        .loss-gain-graph {
          width: 30%;
        }
        .tree-numbers .canopy-status {
          margin-top: 10px;
          width: 180px;
        }
        .embed &{
          float: left;
          padding: 0;
        }
      }

      .country-details .country-sidenav {
        float: none;
        right: auto;
        top: auto;
        height: auto;
        width: 100%;
        display: table;

        & > ul {
          top: auto;
          float: none;
          width: auto;
          height: auto;
          display: table-row;
        }

        & > ul > li {
          width: auto;
          display: table-cell;

          a {
            .sidenav-icon {
              display: none;
            }
          }
          .umd_options_control {
            width: 100%;
          }
        }
      }
    }
    .country-section {
      padding: 45px 20px;

      .section-content {
        &, .section-title {
          padding: 0;
        }
      }

      .section-info {
        h6 {
          display: inline-block;
          width: 75%;
          box-sizing: border-box;
          padding: 0 0 10px;
        }
      }
    }

    .country-carbon-stocks-section {
      padding: 0 20px;
    } // country-carbon-stocks-section

    .country-blog-section {
      h3 {
        padding-top: 0;
      }

      a {
        color: white;
      }

      .columns {
        min-height: 0;
      }

      .column.round .title span {
        margin-top: 10px;
        display: block;
      }
    } // country-blog-section
  }

  .country-header .country-details {
    .country-sidenav .umdoptions_dialog,
    .umdoptions_dialog {
      position: fixed;
      top: 0;
      right: auto;
      left: 0;
      width: 100%;
      height: 100%;

      ul {
        width: 95%;
      }

      .slider {
        width: 100%;
      }

      p .slider #canopy_slider {
        width: 100%;
        margin-left: 0;
      }
    }
  }
}

// maxsize <= $br-mobile
@media only screen and (max-width: $br-mobile - 1) {
  .country-show {
    .country-header {
      .country-title {
        padding: 20px 11px;

        h1 {
          white-space: normal;
        }

        .country-indepth__bubble {
          width: 100%;
          margin: 15px 0 0;

          a {
            max-width: 100%;
          }
        }

        .country-selector {
          right: 0;
          width: 100%;
        }
      }

      .country-details {
        height: auto;

        .country-preview {
          float: none;
          width: 100%;
          height: 100%;
          position: relative;

          .map {
            height: 260px;
            width: 100%;
          }
          .mobile-scroll{
            display: block;
            position: absolute;
            top: 0;
            left: 0;
            height: 260px;
            width: 100%;
            z-index: 200;
            .embed & {
              display: none;
            }
          }

          .tree-numbers,
          .loss-gain-graph {
            width: 100%;
            padding-top: 0;
            text-align: center;
            top: 0;
            .graph-amount,
            .total-loss {
              width: auto;
            }
            .canopy-status {
              width: 80%;
              position: relative;
            }
            #lossGainGraph {
              left: 0;
            }
          }

          .tree-numbers div {
            display: inline-block;
          }

          .tree-cover {
            width: 180px;
          }

          .total-area {
            width: 95px;
            h4 { width: 100%; }
          }

          .map,
          .tree-numbers,
          .loss-gain-graph {
            float: none;
          }

          .loss-gain-graph {
            text-align: center;

            .graph {
              height: 100px;
            }

            .graph svg {
              width: 165px;
            }

            .graph-amount,
            .graph-gain-amount,
            .total-loss,
            .graph-gain-total,
            .total-loss-ha,
            .graph-date {
              max-width: 100%;
            }
          }
        }

        .country-sidenav {
          float: none;
          width: 100%;

          ul {
            display: none;
            top: 0;
            padding: 0;
            background: $dark;
            &.active{
              @include display-flex();
            }

            li {
              height: auto;
              border: 0;
              border-top: 1px solid #333;

              &:last-child {
                border-bottom: 1px solid #333;
              }

              a {
                .sidenav-icon {
                  display: inline-block !important;
                }
              }
            }
          }
        }
      }
    }

    .country-nav-container {
      display: none;
    }

    .country-section {
      padding: 45px 20px;

      .section-info {
        .section-btn {
          right: 0 !important;
        }
      }

      .section-content {
        .left-col,
        .right-col {
          padding: 0;
          width: 100%;
        }

        .right-col {
          .section-btn {
            right: 0;
          }
        }
      }
    }

    .country-alerts-section {
      .forma-alerts-legend {
        margin-bottom: 10px;
      }

      .forma-graph {
        margin-top: 30px;
      }

      .forma_dropdown-link {
        display: none;
      }
    } // country-alerts-section

    .country-graph-section {

      .forests-type-graph {
        margin: 0 0 25px 0;

        svg {
          display: block;
          width: 225px;
          margin: 0 auto;
        }
      }
    } // country-graph-section

    .country-employment {
      .section-content {
        .left-col {
          .employment {
            margin-bottom: 25px;
          }
        }

        .right-col {
          .country-tenure {
            .line-graph text {
              font-size: 13px;
            }
          }
        }
      }
    } // country-employment

    .country-carbon-stocks-section {
      padding: 0 !important;

      .section-content {
        .right-col {
          margin: 0;
        }
      }

      .carbon-text,
      .emissions-text {
        width: 100%;
        margin: 0;
        padding: 20px;
      }

      .emissions-text {
        .section-btn {
          right: 0 !important;
        }
      }
    } // country-carbon-stocks-section

    .country-policy-section {
      .missing-link {
        .section-content {
          text-align: center;
          .btn-rdn {
            width: 100%;
            margin-bottom: 25px;
          }
        }
      }

      .country-external-links,
      .national-policy-links {
        ul > li {
          display: block;
          &::after {
            display: none;
          }
        }
      }
    } //country-policy-section

    .country-blog-section {
      text-align: left;

      .section-title {
        text-align: center;
      }

      .columns {
        .column {
          float: none;

          .story-title,
          .story-content,
          p {
            text-align: left;
          }

          &.round {
            .circle-wrapper {
              text-align: center;
              margin: 25px auto;
            }
          }
        }
      }
    } // country-blog-section
  }
}

.source_category_title{
  display: none !important;
}

.share_dialog,
.country-download-modal {
  position: fixed;
}
